<!-- 询价详情 -->
<template>
	<view class="bg-white">
		<u-navbar :is-back="true" title="询价详情"></u-navbar>

		<view class="center fw padding20 time-box">
			<text class="color-red">询价有效期：{{info.periodOfValid || ''}}</text>
		</view>

		<view class="p-l30 p-t30 p-b30">
			<view class="m-b30">询价详情</view>

			<view class="video-image-box">
				<!-- <video v-if="info.enquiryVideo" class="w-150 h-150 br12 m-r20" :src="info.enquiryVideo"></video> -->
				<image :src="v" mode="aspectFill" v-for="(v,i) in info.enquiryPicture" @click="showImg(i)" :key="i"
					class="br12 m-r20 m-b20 w-150 h-150">
				</image>
			</view>

			<view class="m-t30 m-r30 fs28">
				{{info.remark}}
			</view>
		</view>

		<view class="bg-gray w100" style="height: 30rpx;"></view>


		<view class="padding30">
			<view class="fw m-b30">询价单详情</view>

			<view class="flex-bettwen fs28 m-b20 m-t30">
				<text>询价单号：</text>
				<text>{{info.enquiryId}}</text>
			</view>
			<view class="line-x"></view>
			<view class="flex-bettwen fs28 m-b20 m-t30">
				<text>询价时间：</text>
				<text>{{info.enquiryDate}}</text>
			</view>
			<view class="line-x"></view>
			<view class="flex-bettwen fs28 m-b20 m-t30">
				<text>采购数量：</text>
				<text>{{info.number}}</text>
			</view>
			<view class="line-x"></view>
			<view class="flex-bettwen fs28 m-b20 m-t30">
				<text>可接受定做：</text>
				<text>{{info.isCustomized?'是':'否'}}</text>
			</view>
			<view class="line-x"></view>
		</view>


		<!-- 提示框 -->
		<u-modal v-model="show" content="确定结束询价吗" :show-cancel-button="true" @confirm="sureEnd"
			@cancel="show=false"></u-modal>

		<!-- 轻提示 -->
		<u-toast ref="uToast" />
		
		<!-- 单位弹窗 -->
		<u-popup v-model="showUnit" mode="bottom">
			<view class="center">
				<view class="padding30 " v-for="(item,index) in unitList" :key="index"
					:class="currentUnit == item.value?'color-blue':''" @click="selcetItem(item)">{{item.text}}</view>
				<view class="line-x"></view>
			</view>
		</u-popup>
		
		
		<!-- 报价弹窗 -->
		<u-popup v-model="showWin" @close="closeEnquiryWin" mode="bottom" :closeable="true" border-radius="16"
			:safe-area-inset-bottom="true">
			<view class="padding30">
				<!-- 只能有一个根元素 -->
				<view class="center">
					<view class="center fs30 m-b30" style="font-weight: bold;">报价</view>
				</view>

				<view class="m-b20 hidden br12 bg-white flex" v-if="info.enquiryPicture.length !== 0">
					<view class="w-200 h-200 br16 hidden">
						<u-lazy-load :image="info.enquiryPicture[0]" img-mode="widthFix"
							class="w-200 h-200"></u-lazy-load>
					</view>
					<view class="flex1 padding-lr20 flex-column-between" style="">
						<view class="text-overflow3 fs26">{{info.remark}}</view>
						<view class="">
							<view class="diy-item m-t10" v-if="info.isCustomized">接受定制</view>
						</view>
						<view class="flex-bettwen" :class="info.isCustomized?'':'m-t40'">
							<view class="">
								<text class="price-color fs30" style="font-weight: bold;">{{info.number}}</text>
								<text class="fs24 color-gray">{{info.unit}}</text>
							</view>
						</view>
					</view>
				</view>


				<view class="padding-tb20">
					<view class="flex-center">
						<text class="price-color">*</text>
						<text style="font-weight: bold;">报价信息</text>
						<view class="color-gray fs24">（可选择<text class="blue-color">已有商品</text>报价或<text
								class="color-blue">手动填写</text>报价信息） </view>
					</view>


					<view class="m-t20 flex">
						<!-- <view class="flex-column-center br-line-dashed br12 w-150 h-150 m-r20" @click="chooseImage">
							<view class="center">
								<u-icon name="photo-fill" size="50" color="#999999"></u-icon>
								<view class="fs20 color-gray m-t10">上传图片</view>
							</view>
						</view> -->
						<view class="flex-column-center br-line-dashed br12 w-150 h-150"
							@click="goPage('/pages/selectGoods/selectGoods')">
							<view class="center">
								<u-icon name="bag-fill" size="50" color="#999999"></u-icon>
								<view class="fs20 color-gray m-t10">选择店内商品</view>
							</view>
						</view>
						<view class="m-l20 image-box" v-if="tempFilePathsImg">
							<image :src="tempFilePathsImg" class="w-150 h-150 br12" mode=""></image>
							<u-icon name="minus-circle-fill" class="minus-circle-fill" size="40" @click="delImg"
								color="#d00421"></u-icon>
						</view>

						<view class="m-l20 image-box" v-if="goodsInfo.cover">
							<image :src="goodsInfo.cover" class="w-150 h-150 br12" mode=""></image>
							<u-icon name="minus-circle-fill" class="minus-circle-fill" size="40" @click="delGoods"
								color="#d00421"></u-icon>
						</view>
					</view>

					<view class="flex-bettwen m-t30">
						<text class="price-color">*</text>
						<text>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</text>
						<view class="flex-bettwen flex1 m-l30">
							<input type="number" placeholder="请填写报价价格" v-model="paramsAddEnquriy.price" class="fs28" />
							<view class="flex-center" @click="showUnit = true">
								<text class="m-r20">元/{{currentText}}</text>
								<u-icon name="arrow-down"></u-icon>
							</view>
						</view>
					</view>

					<view class="flex-bettwen flex-bettwen m-t30">
						<view class="flex-center">
							<text class="price-color">*</text>
							<text>货品类型</text>
						</view>
						<view class="">
							<u-tag text="定做" @click="paramsAddEnquriy.goodsType = '1'"
								:type="paramsAddEnquriy.goodsType == '1'?'success':'info'" class="m-r20" />
							<u-tag text="现货" @click="paramsAddEnquriy.goodsType ='0'"
								:type="paramsAddEnquriy.goodsType == '0'?'success':'info'" />
						</view>
					</view>

					<view class="describe-textarea">
						<view class="flex-center">
							<text class="price-color">*</text>
							<text>报价信息</text>
						</view>
						<textarea class="textarea-box m-t20" :maxlength="-1" v-model="paramsAddEnquriy.details"
							placeholder="请描述主要特征、品名、成份、工艺、用途、规格等"></textarea>
					</view>


					<view class="" style="margin-top: 100rpx;">
						<view class="color-gray" style="font-size: 20rpx;">真诚报价，赢取信任，共同发展；<text
								class="price-color">避免低价诱导</text>，若经查实，则可能面临 <text class="price-color">封禁店铺</text>
						</view>
						<u-button type="primary" class="m-t30" @click="sureAdd">提交报价</u-button>
					</view>
				</view>
			</view>
		</u-popup>

		<view class="footer-box" v-if="!isQuote">
			<u-button type="primary" @click="offerPrice">报价</u-button>
		</view>
	</view>
</template>

<script>
	import {
		enquiryAdd,
		enquiryDetails
	} from '@/api/enquriy/index'
	export default {
		data() {
			return {
				info: {
					enquiryPicture: []
				}, // 询价详情
				show: false,
				showWin: false,
				currentInfo: {
					enquiryPicture: []
				}, // 选择当前报价信息
				currentText: '米',
				currentUnit: '0',
				paramsAddEnquriy: { // 添加报价参数
					enquiryId: '', // 询价单id
					shopId: '', // 商家id
					shopName: '', // 商家名称
					details: '', // 报价详情
					price: '', // 价格
					unit: 0, // 0-米 1-条 2-码 3-公斤 4-本
					picture: '', // 上传图片
					product: '', // 产品id
					goodsType: '0', // 0-现货 1-定做
					imUserName: '', // 环信账号
				},
				tempFilePathsImg: '',
				goodsInfo: {
					cover: ''
				}, // 选择商品信息
				showSureClose: false, // 控制显示关闭提示框
				content: '确定暂时隐藏该报价？', // 提示框文本
				initCloseState: false, // 初始化关闭状态
				currentEnquriyIdx: null,
				currentEnquriyItem: null,
				shopId: '',
				enquiryId: '',
				isQuote: false,
				showUnit:false,
				unitList: [{
						text: '米',
						value: '0'
					},
					{
						text: '条',
						value: '1'
					},
					{
						text: '码',
						value: '2'
					},
					{
						text: '公斤',
						value: '3'
					},
				],
				isSend:false,
			}
		},
		onLoad(options) {
			this.enquiryId = options.enquiryId
			if (options.isQuote) {
				this.isQuote = options.isQuote
			}
			
			this.getUserInfo()
			this.paramsAddEnquriy.imUserName = this.$store.state.shopInfo.imUserName
			this.paramsAddEnquriy.shopName = this.$store.state.shopInfo.name
			this.paramsAddEnquriy.shopId = this.$store.state.shopInfo.id
			this.paramsAddEnquriy.enquiryId = options.enquiryId
			


			this.getEnquiryDetails()
			uni.$on('selectGoods', (e) => {
				console.log('拿到商品数据了', e);
				this.goodsInfo = e
				this.paramsAddEnquriy.product = e.id
				if (e.unit == '米') {
					this.paramsAddEnquriy.unit = 0
					this.currentUnit = 0
				} else if (e.unit == '条') {
					this.paramsAddEnquriy.unit = 1
					this.currentUnit = 1
				} else if (e.unit == '码') {
					this.paramsAddEnquriy.unit = 2
					this.currentUnit = 2
				} else if (e.unit == '公斤') {
					this.paramsAddEnquriy.unit = 3
					this.currentUnit = 3
				} else {
					this.paramsAddEnquriy.unit = 4
					this.currentUnit = 4
				}
				this.currentText = e.unit
				this.paramsAddEnquriy.price = e.price
			})
		},
		onUnload() {
			uni.$off('selectGoods')
		},
		mounted() {
			// console.log('路径参数', this.$scope.options.data);
			// this.info = JSON.parse(decodeURIComponent(this.$scope.options.data))
		},
		methods: {
			// 选择单位
			selcetItem(item) {
				this.currentUnit = item.value
				this.currentText = item.text
				this.paramsAddEnquriy.unit = item.value
				this.showUnit = false
			},
			getUserInfo() {
				this.$store.dispatch('updateUserInfo')
			},
			// 取询价详情
			async getEnquiryDetails() {
				let res = await enquiryDetails({
					enquiryId: this.enquiryId
				})

				res.data.enquiryPicture = JSON.parse(res.data.enquiryPicture)
				this.info = res.data
				console.log('这是询价详情', res.data);
			},


			// 提交报价
			async sureAdd() {
				if(this.isSend) return
				console.log('提交报价参数', this.paramsAddEnquriy);
				if (!this.paramsAddEnquriy.product && !this.tempFilePathsImg) {
					return this.$refs.uToast.show({
						title: '请上传图片',
						type: 'error',
					})
				}


				if (!this.paramsAddEnquriy.price) {
					return this.$refs.uToast.show({
						title: '请输入价格',
						type: 'error',
					})
				}

				if (!this.paramsAddEnquriy.details) {
					return this.$refs.uToast.show({
						title: '请输入报价信息',
						type: 'error',
					})
				}
				this.isSend = true
				uni.showLoading({
					title:'加载中...',
					icon:'none'
				})
				if (this.tempFilePathsImg) {
					this.paramsAddEnquriy.picture = await this.uploadFile(this.tempFilePathsImg)
				}
				if (this.paramsAddEnquriy.product) {
					this.paramsAddEnquriy.picture = this.goodsInfo.cover
				}

				let res = await enquiryAdd(this.paramsAddEnquriy)
				this.isSend = false
				uni.hideLoading()
				if (res.code == 0) {
					this.$refs.uToast.show({
						title: '报价成功',
						type: 'success',
					})


					setTimeout(() => {
						// 关闭弹窗
						this.closeEnquiryWin()
					}, 2000)

				}

			},
			// 上传图片
			uploadFile(url) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: 'http://8.138.15.166:8080' + '/api/common/upload', //仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							console.log('视频', JSON.parse(res.data).url);
							resolve(JSON.parse(res.data).url)
							// that.params.Video = JSON.parse(res.data).url
						},
						fail: (err) => {
							console.log(err);
						}
					});

				})
			},
			goPage(url) {
				if (!url) {
					return uni.showToast({
						title: '敬请期待！',
						icon: 'none'
					})
				}
				if (this.tempFilePathsImg) {
					return this.$refs.uToast.show({
						title: '请先删除图片',
						type: 'error',
					})
				}


				uni.navigateTo({
					url
				})
			},
			offerPrice() {
				this.showWin = true
			},
			closeEnquiryWin() {
				uni.navigateBack()
			},
			// 删除图片
			delImg() {
				this.tempFilePathsImg = ''
			},
			// 删除商品
			delGoods() {
				this.goodsInfo = {
					cover: ''
				}
				this.paramsAddEnquriy.unit = 0
				this.paramsAddEnquriy.price = ''
				this.paramsAddEnquriy.product = ''
			},
			// 上传图片
			chooseImage() {
				if (this.goodsInfo.cover) {
					return this.$refs.uToast.show({
						title: '请删除关联商品',
						type: 'error',
					})
				}
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(res.tempFilePaths);
						that.tempFilePathsImg = res.tempFilePaths[0]
					}
				});
			},
			// 预览图片
			showImg(i) {
				uni.previewImage({
					current: i, // 当前显示图片索引
					urls: this.info.enquiryPicture // 需要预览的图片http链接列表
				});
			},
			// 点击结束询价
			async handleEnd() {
				this.show = true
			},
			// 确认结束询价
			async sureEnd() {
				let res = await apiCloseEnquiry({
					id: this.info.id
				})
				this.$refs.uToast.show({
					title: '操作成功',
					type: 'success',
				})


				setTimeout(() => {
					uni.navigateBack()
				}, 1000)

			}
		}
	}
</script>

<style lang="scss" scoped>
	.time-box {
		background: #fbe7e9;
	}

	.color-red {
		color: #c9091d;
	}

	.video-image-box {
		display: flex;
		flex-wrap: wrap;
	}

	.footer-box {
		width: 100%;
		position: fixed;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}


	.describe-textarea {
		border-radius: 16rpx;
		margin-top: 20rpx;
	}

	.textarea-box {
		width: 94%;
		height: 100rpx;
		border-radius: 16rpx;
		background: #f2f2f2;
		font-size: 24rpx;
		// line-height: 40rpx;
		padding: 20rpx;
	}
	
	.image-box {
		position: relative;
	
		.minus-circle-fill {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
		}
	}
</style>